<template>
    <div class="login-container">
        <div class="login-content">
            <div class="login-header">
                <h1>充电桩管理系统</h1>
                <p>欢迎北邮人，请登录您的账号</p>
            </div>
            <el-form ref="formRef" :model="loginData" :rules="rules" class="login-form">
                <el-form-item prop="username">
                    <el-input 
                        v-model="loginData.username" 
                        placeholder="请输入用户名"
                        prefix-icon="User"
                        @keydown.enter="handleLogin"
                    />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input 
                        type="password" 
                        v-model="loginData.password" 
                        placeholder="请输入密码"
                        prefix-icon="Lock"
                        show-password
                        @keydown.enter="handleLogin"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button 
                        type="primary" 
                        class="login-button" 
                        :loading="loading"
                        @click="handleLogin"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
    
<script>
import { reactive, toRefs, ref } from 'vue'
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
    name: "login",
    setup() {
        const store = useStore()
        const router = useRouter()
        const formRef = ref(null)
        const loading = ref(false)

        const rules = {
            username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
            ]
        }

        const data = reactive({
            loginData: {
                username: "",
                password: ""
            }
        })

        const handleLogin = async () => {
            if (!formRef.value) return
            
            try {
                await formRef.value.validate()
                loading.value = true
                
                const response = await axios.post(process.env.VUE_APP_BACKEND_URL + '/login', data.loginData)
                const responseData = response.data

                if (responseData.code === 0) {
                    localStorage.setItem("car_id", responseData.data.car_id)
                    localStorage.setItem("user_name", responseData.data.username)
                    store.commit('setUserInfo', responseData.data)
                    document.title = responseData.data.car_id
                    ElMessage.success('登录成功')
                    router.push({ path: "/user" })
                } else {
                    ElMessage.error(responseData.msg || '用户名或密码错误')
                }
            } catch (error) {
                if (error.response) {
                    ElMessage.error(error.response.data.msg || '登录失败')
                } else {
                    ElMessage.error('网络错误，请稍后重试')
                }
            } finally {
                loading.value = false
            }
        }

        return {
            ...toRefs(data),
            formRef,
            loading,
            rules,
            handleLogin
        }
    }
}
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #2b3391 0%, #3d47b3 100%);
    position: relative;
    overflow: hidden;
}

.login-content {
    width: 400px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 2;
    animation: slideUp 0.5s ease;
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h1 {
    color: var(--primary-color);
    font-size: 28px;
    margin-bottom: 10px;
}

.login-header p {
    color: var(--text-gray);
    font-size: 16px;
}

.login-form {
    margin-top: 20px;
}

.login-form :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(43, 51, 145, 0.1);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.login-form :deep(.el-input__wrapper:hover) {
    box-shadow: 0 4px 8px rgba(43, 51, 145, 0.15);
}

.login-form :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 2px rgba(43, 51, 145, 0.2);
}

.login-button {
    width: 100%;
    height: 44px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 16px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.login-button:active {
    transform: translateY(0);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-content {
        width: 90%;
        padding: 30px 20px;
    }
    
    .login-header h1 {
        font-size: 24px;
    }
    
    .login-header p {
        font-size: 14px;
    }
}
</style>